<!DOCTYPE html>
<html>
<head>
    <title>Resistor Network Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="400" style="background-color: white;"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters for the grid
        const sideLength = 150; // Side length of the large square
        const x_start = 150;
        const y_start = 100;

        // Line style
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // Draw the square grid
        ctx.beginPath();
        // Outer square
        ctx.rect(x_start, y_start, sideLength, sideLength);
        // Middle horizontal line
        ctx.moveTo(x_start, y_start + sideLength / 2);
        ctx.lineTo(x_start + sideLength, y_start + sideLength / 2);
        // Middle vertical line
        ctx.moveTo(x_start + sideLength / 2, y_start);
        ctx.lineTo(x_start + sideLength / 2, y_start + sideLength);
        ctx.stroke();

        // Label style
        ctx.fillStyle = 'black';
        ctx.font = 'italic 32px "Times New Roman"';

        // Draw labels
        // Point A: Midpoint of the left side
        const Ax = x_start;
        const Ay = y_start + sideLength / 2;
        ctx.fillText('A', Ax - 35, Ay + 12);

        // Point B: Midpoint of the top side
        const Bx = x_start + sideLength / 2;
        const By = y_start;
        ctx.fillText('B', Bx - 12, By - 10);

        // Point C: Top-left corner
        const Cx = x_start;
        const Cy = y_start;
        ctx.fillText('C', Cx - 35, Cy + 8);

    </script>
</body>
</html>